<template>
  <div @keyup.enter="getData()">
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <el-input v-model="params.customer_name" placeholder="项目名称查询" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="params.corp_name" placeholder="负责人查询" :clearable="true"></el-input>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          clearable
          :auto-top="true"
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:address="scope">
        <div class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</div>
      </template>
      <template v-slot:status="scope">
        <div>{{ enumRenewalStatus[scope.row.load_beh_status] }}</div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <el-dialog
      append-to-body
      top="30px"
      width="1000px"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <component-index :related-id="relatedId" :farm-id="farmId"></component-index>
    </el-dialog>
    <post-loan-file :visible.sync="reportVisible" :related-data="relatedData"></post-loan-file>
  </div>
</template>

<script>
import SelectAddress from '@/components/select/SelectAddress'
import { enumGuatype } from '@/credit/plugins/enumTown'
import { enumRenewalStatus } from '@/credit/plugins/enum'
import { mapGetters } from 'vuex'
import { MANAGE_JOBS } from '@/credit/plugins/constant'
import ComponentIndex from '@/credit/views/city/self/after/ComponentIndex'
import PostLoanFile from '@/credit/components/warningTips/PostLoanFile'
export default {
  components: {
    SelectAddress,
    ComponentIndex,
    PostLoanFile,
  },
  props: {},
  data() {
    return {
      enumRenewalStatus,
      order: {
        load_date: 'desc',
      },
      params: {
        index: 1,
        size: 15,
        'load_beh_status.eq': '1',
        'confuse_status.neq': 3,
        'loan_notice_status.eq': 2,
        'gua_type.in': '1,2,4',
      },
      queryId: '',
      relatedData: {},
      reportVisible: false,
      loading: false,
      noticeLoading: false,
      activeName: 'file',
      tableName: 'customer_related',
      totalCount: 0,
      tableData: [],
      tableColumns: [
        {
          attrs: { label: '项目名称', prop: 'customer_name', minWidth: '110px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        {
          attrs: { label: '业务类型', prop: 'gua_type', align: 'center' },
          process: v => enumGuatype[v] || '-',
        },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        { attrs: { label: '放款金额(万元)', prop: 'reply_funds', align: 'center' } },
        {
          attrs: { label: '放款时间', prop: 'load_date' },
          process: v => this.$utils.dateFormat(v, 'yyyy.MM.dd'),
        },
        { attrs: { label: '在保余额', prop: 'left_funds', align: 'center' } },
        { attrs: { label: '贷后状态', align: 'center' }, slot: 'status' },
        {
          attrs: { label: '操作', align: 'center', width: 120 },
          operations: [
            { content: '贷后管理', icon: 'fa fa-edit', event: this.handleEdit },
            { content: '查看', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],
      visible: false,
      relatedId: '',
      farmId: '',
    }
  },
  computed: {
    ...mapGetters(['org', 'user', 'job', 'userId']),
    isUserTown() {
      return +this.user.orgRegionLever === 3
    },
    clientId() {
      return this.org.clientId
    },
    isManager() {
      return MANAGE_JOBS.includes(this.job)
    },
  },
  watch: {},
  mounted() {},
  created() {
    this.getData()
  },
  methods: {
    getData(index = 1) {
      this.params.index = index
      if (!this.isManager) {
        this.params['orWhere.pre_approval_person.eq'] = this.userId
        this.params['orWhere.res_a.eq'] = this.userId
        this.params['orWhere.res_b.eq'] = this.userId
      } else {
        if (this.isUserTown) {
          this.params['service_id.eq'] = this.clientId
        } else {
          this.params['orWhere.service_id.eq'] = this.clientId
          this.params['orWhere.recommend_service.eq'] = this.clientId
        }
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          this.tableData = (res && res.data && res.data.data) || []
          this.totalCount = (res && res.data && res.data.totalCount) || 0
        })
        .catch(() => {
          this.$message.error('请求项目库失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleEdit(row) {
      this.visible = true
      this.relatedId = row.customer_related_id || ''
      this.farmId = row.customer_id || ''
    },
    async handleView(row) {
      this.reportVisible = true
      this.relatedData = { ...row }
    },
  },
}
</script>
<style lang="scss" scoped></style>
